<template>
    <div>
        <el-form :model="basic" class="demo-form-inline">
            <el-form-item label="公司账号:">
                <span>{{ basic.account }}</span>
            </el-form-item>
            <el-form-item label="公司名称:">
                <span>{{ basic.companyName }}</span>
            </el-form-item>
            <el-form-item label="公司纳税号:">
                <span>{{ basic.companyId }}</span>
            </el-form-item>
            <el-form-item label="公司法人:">
                <span>{{ basic.corporation }}</span>
            </el-form-item>
            <el-form-item label="法人身份证:">
                <span>{{ basic.idCard }}</span>
            </el-form-item>
            <el-form-item label="图片:">
                <img v-for="item in basic.imageUrls" width="10%" :src="item" alt="">
            </el-form-item>
            <el-form-item>
                <el-button v-if="basic.status == 0" type="primary">未实名</el-button>
                <el-button v-else type="primary">已实名</el-button>
                <el-button v-if="basic.status == 0" type="primary" @click="dialogVisible = true">完善资料</el-button>
            </el-form-item>
        </el-form>

        <el-dialog title="账户信息" :visible.sync="dialogVisible" width="800px">
            <template>
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="账户:">
                        <el-input v-model="form.account" placeholder="请输入账户"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称:">
                        <el-input v-model="form.companyName" placeholder="请输入公司名称"></el-input>
                    </el-form-item>
                    <el-form-item label="公司纳税号:">
                        <el-input v-model="form.companyId" placeholder="请输入纳税号"></el-input>
                    </el-form-item>
                    <el-form-item label="法人:">
                        <el-input v-model="form.corporation" placeholder="请输入法人"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证:">
                        <el-input v-model="form.idCard" placeholder="请输入法人身份证"></el-input>
                    </el-form-item>
                    <el-form-item label="图片:">
                        <el-upload
                            ref="upload"
                            action="/upload"
                            list-type="picture-card"
                            :auto-upload="false"
                            :limit="3"
                            :before-upload="beforeUpload"
                            :http-request="httprequest"
                            :on-change="handleChange"
                            :on-preview="handlePictureCardPreview"
                            :on-exceed="handleExceed"
                            :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确定</el-button>
                        <el-button @click="closeDialog">取消</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisible1">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

    </div>

</template>

<script>
    import axios from 'axios';
    import {mytips} from "../module/tools";

    export default {
        name: 'basicMessage',
        data() {
            return {
                basic: {
                    account: '',
                    companyName: '',
                    companyId: '',
                    corporation: '',
                    idCard: '',
                    status: 0,
                    imageUrls:[
                        'http://hfbimg.wukongcz.com/366019153533840444450c5bf64d2a4c.jpg',
                        'http://hfbimg.wukongcz.com/7196091535594976484宝宝.jpg'
                    ]
                },
                form: {
                    account: '',
                    companyName: '',
                    companyId: '',
                    corporation: '',
                    idCard: ''
                },
                dialogVisible: false,
                dialogVisible1: false,
                dialogImageUrl: '',
                files: []
            };
        },
        methods: {
            //移除某一图片
            handleRemove(file, fileList) {
                this.files.splice(0, this.files.length);
                fileList.forEach(item => {
                    this.files.push(item);
                })
            },
            //查看某一图片
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible1 = true;
            },
            //上传之前
            beforeUpload(file) {
                //判断图片上传的规则
                if(file.size > 1024 * 1024){
                    mytips("图片最大只能上传1M");
                    return false;
                }

                // 过滤图片类型
                if(file.type != 'image/jpeg' && file.type != 'image/gif' && file.type != 'image/png' && file.type != 'image/bmp'){
                    mytips("只能上传图片");
                    return false;
                }
            },
            //覆盖默认上传方法
            httprequest() {

            },
            //文件改变调用
            handleChange(file,fileList) {
                this.files.splice(0, this.files.length);
                fileList.forEach(item => {
                    this.files.push(item);
                })
            },
            //超限制调用
            handleExceed(file,fileList) {
                mytips('图片上传超出限制,限制' + fileList.length + "张")
            },
            //表单和文件
            onSubmit() {
                let length = this.files.length;
                if (length === 0) {
                    mytips('请上传图片');
                    return;
                }
                console.log(length);
                let formData = new FormData();
                this.files.forEach(function (item) {
                    formData.append('files', item);
                });
                formData.append('account', this.form.account);
                console.log(formData);
                axios.post(API_PATH + "/upload",formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {

                })
            },
            //关闭实名信息框
            closeDialog() {
                this.dialogVisible = false;
                this.formData = null;
                //清除图片的上传
                this.$refs.upload.clearFiles();
            }
        }
    };

</script>
